<script setup lang="tsx">
import {
  ElButton,
  ElInput,
  ElSpace,
  ElMessage,
  // ElPopconfirm,
  ElTag,
  ElSelect,
  // ElSelectV2,
  ElOption,
} from "element-plus";
// import { MyIcon } from "@/components/MyIcon";
import { onMounted, ref } from "vue";
// import { userApi } from "@/api/admin/user";
// import { deepClone } from "@/utils";
import { LyTable } from "@/components/Table";
import { loginLogApi } from "@/api/admin/loginLog";
// const UserFormRef = ref<any>(null);
// const UserRoleFormRef = ref<any>(null);
const params = ref<any>({
  account: "",
  isSuccess: 2,
  address: "",
  msg: "",
});


const lyTableRef = ref<any>(null);

const loginLogTable = ref<any>([]);

// const roleData = ref<any>([]);

// const roleOptions = ref<any>([]);

const columns = ref<any>([
  {
    prop: "selection",
    align: "center",
    type: "selection",
  },
  {
    prop: "index",
    label: "序号",
    align: "center",
    hidden: false,
    // width:"50px",
    render: (row: any, index: number) => {
      row
      return index + 1;
    }
  },
  {
    prop: "account",
    label: "登录账号",
  },
  {
    prop: "ip",
    label: "ip",
  },
  {
    prop: "address",
    label: "登录地点",
  },
  {
    prop: "browser",
    label: "浏览器",
  },
  {
    prop: "os",
    label: "操作系统",
  },
  {
    prop: "msg",
    label: "提示消息",
  },
  {
    prop: "isSuccess",
    label: "登录状态",
    render:(row:any)=>{
      const isSuccess = row.isSuccess
      const status = row.isSuccess == 1 ? "登录成功" : "登录失败";
      return <>
       <ElTag type={isSuccess==1?"success":"danger"}>{status}</ElTag>
      </>
    }
  },
  {
    prop: "createTime",
    label: "登录时间",
  },
  // {
  //   prop: "",
  //   label: "操作",
  //   render: (row: any) => {
  //     return (
  //       <>
  //         <ElSpace>
  //           <ElButton v-per="user_update" onClick={() => { handleEdit(row) }} link type="primary" size="small">
  //             <MyIcon color="#409EFF" icon="el:EditPen" />
  //           </ElButton>
  //           {/* <ElButton onClick={() => { handleAddUserRole(row) }} link type="primary" size="small">
  //             <MyIcon color="#409EFF" icon="el:Operation" />
  //           </ElButton> */}
  //           <ElPopconfirm title="确定要删除吗？" confirm-button-text="删除" cancel-button-text="取消" confirm-button-type="danger"
  //             cancel-button-type="info" onConfirm={() => { handleDel(row.id) }} hideAfter={0}>
  //             {{
  //               reference: () => {
  //                 return <ElButton v-per="user_remove" type="danger" link size="small">
  //                   <MyIcon color="#F56C6C" icon="el:Delete" />
  //                 </ElButton>
  //               }
  //             }}
  //           </ElPopconfirm>
  //         </ElSpace >
  //       </>
  //     )
  //   },
  // },
])

// 分页
const page = ref({
  currentPage: 1,
  pageSize: 20,
  total: 0,
  pageSizes: [5, 10, 15, 20],
  layout: "total, sizes, prev, pager, next, jumper"
});

// 获取登录日志
const getLoginLog = async () => {
  const newPage = { ...page.value, layout: null, pageSizes: null, total: null };
  const ret = await loginLogApi.getLoginLog({ ...params.value, ...newPage });
  if (ret.code === 200) {
    // console.log(ret)
    loginLogTable.value = ret.data.data;
    page.value.total = ret.data.total;
  } else {
    ElMessage.error(ret.data.msg);
  }
};


onMounted(() => {
  getLoginLog();
});

// 刷新
const onRefresh = () => {
  getLoginLog();
};


// 防抖查询
// const debounceQuery = debounce(() => {
//   getUser();
// }, 500);

// // 监听params.title
// watch(
//   () => params.value.account,
//   () => {
//     debounceQuery();
//   }
// );

// 分页改变
const currentChange = (value: number) => {
  page.value.currentPage = value;
  getLoginLog();
};

// 添加用户角色
// const handleAddUserRole = (user: any) => {
//   const newUser = deepClone(user);
//   UserRoleFormRef.value.open(newUser);
// };

// const handleEdit = (user: any) => {
//   const newUser = deepClone(user);
//   newUser.roles = newUser.roles.map((item: any) => item.id);
//   UserFormRef.value.open(newUser);
// };

// const handleDel = async (id: string) => {
//   const ret = await userApi.removeUser(id);
//   if (ret.code === 200) {
//     getUser();
//     ElMessage.success("删除成功");
//   } else {
//     ElMessage.error(ret.data.msg);
//   }
// };


const openColumnSetting = () => {
  lyTableRef.value.openColumnSetting();
}

const updateColumnSetting = (columnsData: any) => {
  columns.value = columnsData;
}

const tableOption = ref({
  columns,
  data: loginLogTable,
  page: page,
  // currentChange,
})
</script>

<template>
  <div>
    <LyTable :isShowPage="true" ref="lyTableRef" v-bind="tableOption" pageVerticalAlign="top"
      @currentChange="currentChange" @updateColumnSetting="updateColumnSetting">
      <template #tableTop>
        <div class="ly-top">
          <div class="ly-top-left">
            <el-button @click="onRefresh" type="" icon="Refresh" />
            <el-button type="primary" plain @click="openColumnSetting" icon="Tools"></el-button>
          </div>
          <div class="ly-top-right">
            <ElSpace>
              <el-input clearable v-model="params.account" placeholder="请输入账号名称" />
              <el-input clearable v-model="params.address" placeholder="请输入登录地址" />
              <el-input clearable v-model="params.msg" placeholder="请输入登录消息" />
              <el-select style="min-width: 150px" v-model="params.isSuccess" placeholder="登录状态" >
                <el-option v-for="item in [{label:'全部',value:2},{label:'登录成功',value:1},{label:'登录失败',value:0}]" :key="item.label" :label="item.label" :value="item.value" />
              </el-select>
              <!-- <el-select style="width: 150px" clearable v-model="params.roleId" placeholder="请选择">
              <el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select> -->
              <!-- <el-select-v2 v-model="params.roleId" style="min-width: 150px" :options="roleOptions as any"
                placeholder="请选择角色" multiple /> -->
              <el-button @click="getLoginLog" type="primary">搜索</el-button>
            </ElSpace>
          </div>
        </div>
      </template>
    </LyTable>
  </div>
</template>
<style scoped lang="less">
.page {
  margin-top: 10px;
  display: flex;
  justify-content: right;
}

.ly-top {
  display: flex;
  justify-content: space-between;
}
</style>
